import React from 'react';
import { Button, Space, Steps, Card, Typography, Modal } from "antd";
import {
  apiExpressageList,
  apifindCheckLogistics
} from "@/request/orderManagement";
import { getDateTime2 } from '@/utils/getDate'
import store from "@/store/store";
const { Step } = Steps;
const { Paragraph } = Typography;

export default class OrderStep extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      orderInfo: props.orderInfo, //数据信息
      currentValue: '', //当前进度值
      stepParams: [], //step 文案
      logisticsModal: false,
      logisticsData: [],
    }
  }
  async componentDidMount() {
    await this.getData()
  }
  // 数据处理
  getData = async () => {
    let { orderInfo } = this.state
    if (orderInfo) {
      // 订单类型
      let activityTypeCode = ''
      switch (orderInfo.activityTypeCode) {
        case 0:
          activityTypeCode = "普通订单"
          break;
        case 2:
          activityTypeCode = "拼团订单"
          break;
        case 1:
          activityTypeCode = "砍价订单"
          break;
        case 3:
          activityTypeCode = "奖品订单"
          break;
      }
      orderInfo.activityTypeCode = activityTypeCode
      orderInfo.orderState !== '0' ? this.getFinishStep(orderInfo) : this.getOffStep(orderInfo)
      this.setState({
        orderInfo,
      })
    }
  }
  // step交易完成进度数据处理
  getFinishStep = (params) => {
    if (params.orderState !== '0') {
      let step = ''
      switch (params.orderState) {
        case '3':
          step = 0
          break
        case '4':
          step = 1
          break
        case '5':
          step = 2
          break
        case '6':
          step = 1
          break
        case '9':
          step = 4
          break
      }
      this.setState({
        currentValue: step,
        stepParams: [
          {
            title: '生成订单',
            description: params.createTime,
          },
          {
            title: params.activityType === "TEAM_BUY" && params.orderState === '6' ? "待分享" : '已付款',
            subTitle: params.payTime || "",
            description: (
              (params.orderState === '4' || params.orderState === '6') ?
                <Button
                  type="primary"
                  onClick={this.coerceRefund}
                  danger
                >
                  退款
                </Button> : null
            ),
          },
          {
            title: '已发货',
            description: params.orderState === '5' ? <Space direction='vertical'>
              <span>{params.goodsGoTime}</span>
              <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
            </Space> : params.goodsGoTime
          },
          // {
          //   title: '已收货',
          //   description: params.goodsArrTime,
          // },
          {
            title: '交易完成',
            description: params.orderState === '9' ? <Space direction='vertical'>
              <span>{params.orderEndTime}</span>
              <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
            </Space> : params.orderEndTime
          },
        ]
      })
    }
  }
  // step交易关闭进度数据处理
  getOffStep = (params) => {
    let stepCurrent = ''
    let stepValue = []
    if (params.orderState === '0') {
      switch (params.beforeEndOrderState) {
        case '3':
          stepCurrent = 1
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '交易关闭',
              description: params.orderEndTime,
            }
          ]
          break
        case '4':
          stepCurrent = 2
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '交易关闭',
              description: params.orderEndTime,
            }
          ]
          break
        case '5':
          stepCurrent = 3
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '已发货',
              description: params.orderState === '5' ? <Space direction='vertical'>
                <span>{params.goodsGoTime}</span>
                <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
              </Space> : params.goodsGoTime
            },
            {
              title: '交易关闭',
              description: <Space direction='vertical'>
                <span>{params.orderEndTime}</span>
                <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
              </Space>
            }
          ]
          break
        case '9':
          stepCurrent = 4
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '已发货',
              description: params.orderState === '5' ? <Space direction='vertical'>
                <span>{params.goodsGoTime}</span>
                <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
              </Space> : params.goodsGoTime
            },
            // {
            //   title: '已收货',
            //   description: params.goodsArrTime,
            // },
            {
              title: '交易关闭',
              description: <Space direction='vertical'>
                <span>{params.orderEndTime}</span>
                <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
              </Space>
            }
          ]
          break
        case '0':
          stepCurrent = 4
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '已发货',
              description: params.orderState === '5' ? <Space direction='vertical'>
                <span>{params.goodsGoTime}</span>
                <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
              </Space> : params.goodsGoTime
            },
            // {
            //   title: '已收货',
            //   description: params.goodsArrTime,
            // },
            {
              title: '交易关闭',
              description: <Space direction='vertical'>
                <span>{params.orderEndTime}</span>
                <Button onClick={() => this.getLogisticsInfo()}>查看物流</Button>
              </Space>
            }
          ]
          break
      }
      this.setState({
        currentValue: stepCurrent,
        stepParams: stepValue
      })
    }
  }

  coerceRefund = () => {
    this.props.coerceRefund()
  }

  getLogisticsInfo = async () => {

    let values = this.props.orderInfo;
    let options = []
    apiExpressageList().then(res=>{
      if (res.code === 0 && res.data) {
        options = res.data.map(v => {
          return {
            value: v.expressageCompanyCode,
            label: v.expressageCompanyName
          }
        })
      }
    })
    if (values.courierCode === "HQM") {
      let context = null
      if (values.deliveryTask) {
        context = values.deliveryTask.hasOwnProperty('progressList') ? values.deliveryTask.progressList.map(v => {
          let time = v.createTime
          return {
            desc: v.progressDescription,
            time
          }
        }) : null
      }
      let courierCode = ""
      for (let i = 0; i < options.length; i++) {
        if (options[i].value === values.courierCode) {
          courierCode = options[i].label
        }
      }
      this.setState({
        logisticsModal: true,
        courierCode,
          logisticsData: context,
          courierNo: values.deliverymanName
      })
    } else {
      await apifindCheckLogistics({orderId: values.shopOrderId,code:values.oneOutLibraryCode}).then(res => {
        if (res.code === 0 && res.data) {
          let context = null
          if (res.data.msg) {
            context = res.data.msg.hasOwnProperty('context') ? res.data.msg.context.map(v => {
              let time = v.time * 1000
              time = new Date(parseInt(time))
              time = getDateTime2(time)
              return {
                ...v,
                time
              }
            }) : null
          }
          let courierCode = ""
          for (let i = 0; i < options.length; i++) {
            if (options[i].value === res.data.courierCode) {
              // debugger
              courierCode = options[i].label
            }
          }
          this.setState({
            logisticsModal: true,
            courierCode,
              logisticsData: context,
              courierNo: res.data.courierNo
          })
        }
      })
    }
  }

  render() {
    const { orderInfo, currentValue, stepParams, logisticsModal,courierNo,courierCode,logisticsData } = this.state
    return (
      <div>
        <Paragraph>
          <blockquote>
            <Space size={30}>
              <span>订单号：{orderInfo.orderCode}</span>
              <span>下单时间：{orderInfo.createTime}</span>
              <span>{orderInfo.activityTypeCode}</span>
            </Space>
          </blockquote>
        </Paragraph>
        <Card>
          <Steps
            progressDot
            current={currentValue}
          >
            {stepParams.map((item, index) => {
              return <Step title={item.title} subTitle={item.description} key={index} />
            })}
          </Steps>
        </Card>
        <Modal
          title={"跟踪物流"}
          visible={logisticsModal}
          onCancel={() => this.setState({ logisticsModal: false })}
          onOk={() => this.setState({ logisticsModal: false })}
          cancelButtonProps={{ style: { display: "none" } }}
        >
          <p>快递公司：{courierCode}</p>
          {courierCode === "哈奇马自配送" ?
              <p>配送员：{courierNo}</p>
              : <p>快递单号：{courierNo}</p>
          }
          <Steps progressDot current={1} direction="vertical">
            {logisticsData?.map(v => {
               return <Step title={v.time} description={v.desc} />
            })}
          </Steps>
          <p>暂无物流信息</p>
        </Modal>
      </div>
    )
  }
}
